<template>
  <!-- 添加弹出框 -->
  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="700">
    <el-form :model="addform">
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input
          v-model="addform.name"
          style="width: 240px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="addform.gender">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input
          v-model="addform.phone"
          style="width: 240px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item el-form-item label="身份证号" :label-width="formLabelWidth">
        <el-input
          v-model="addform.idcard"
          style="width: 240px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item el-form-item label="联系人" :label-width="formLabelWidth">
        <el-input
          v-model="addform.emname"
          style="width: 240px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input
          v-model="addform.emphone"
          style="width: 240px"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="联系关系" :label-width="formLabelWidth">
        <el-select
          v-model="addform.emrelation"
          style="width: 240px"
          placeholder="紧急联系人与客户关系"
        >
          <el-option label="子女" value="子女" />
          <el-option label="祖孙" value="祖孙" />
          <el-option label="叔侄" value="叔侄" />
          <el-option label="朋友" value="朋友" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务地址" :label-width="formLabelWidth">
        <el-input
          v-model="addform.addr"
          style="width: 240px"
          autosize
          type="textarea"
          placeholder="Please input"
        />
      </el-form-item>
      <el-form-item label="个人病史" :label-width="formLabelWidth">
        <el-input
          v-model="addform.disease"
          style="width: 240px"
          autosize
          type="textarea"
          placeholder="Please input"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="loginForm">
    <el-form :model="customer" label-width="80px" style="width: 300px">
      <el-form-item label="用户名" prop="phone">
        <el-input v-model="customer.aaname" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="verifyCode">
        <el-input v-model="customer.verifyCode" placeholder="请输入验证码">
          <template #append>
            <el-button @click="startCountdown" :disabled="isCounting">
              {{ isCounting ? timeLeft : "发送验证码" }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="login"
          style="width: 180px; color: rgb(109, 164, 232)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

let timeLeft = ref(3);
const isCounting = ref(false);
const customer = reactive({});
const formLabelWidth = "80px";
const dialogFormVisible = ref(false);
let dialogTitle = ref("");
let timer;
let addform = reactive({});
const router = useRouter();

//  发送验证码
const startCountdown = () => {
  isCounting.value = true;
  timer = setInterval(() => {
    timeLeft.value -= 1;
    if (timeLeft.value <= 0) {
      clearInterval(timer);
      isCounting.value = false;
      timeLeft = ref(3);
    }
  }, 1000);
  console.log(customer);
  axios.post("/cus/mailcode", customer).then((resp) => {
    console.log(resp)
    if (resp.data.code == 200) {
      ElMessage({ message: "验证码发送成功", type: "success" });
    } else {
      ElMessage({ message: "验证码发送失败，请重新发送", type: "error" });
    }
  });
};
const login = () => {
  axios.post("/cus/login", customer).then((resp) => {
    if (resp.data.code == 200) {
      //  将响应头中的token存入LocalStorage
      let token = resp.headers["xu-auth-token"];
      window.localStorage.setItem("utoken", token);
      let userid = resp.headers["userid"];
      window.localStorage.setItem("userid", userid);
      ElMessage({ message: resp.data.msg, type: "success" });
      router.push("/usermain");
    } else if (resp.data.code == 202) {
      ElMessage.error(resp.data.msg);
      addform = reactive({});
      dialogTitle.value = "开始注册";
      dialogFormVisible.value = true;
    } else if (resp.data.code == 401) {
      ElMessage.error(response.data.msg);
      router.push("/login");
    } else {
      ElMessage.error(resp.data.msg);
    }
  });
};
// 注册
const add = () => {
  addform.email = customer.aaname;
  axios.post("/cus/add", addform).then((resp) => {
    if (resp.data.code == 200) {
      dialogFormVisible.value = false;
      addform = reactive({});
      ElMessage({ message: "创建成功", type: "success" });
      login();
    }
  });
};
</script>
  
  <style>
.loginForm {
  width: 300px;
  margin-top: 100px;
  margin: auto;
  padding-top: 150px;
}
</style>